<script lang="ts" setup>
import {computed} from "vue"
import {useRoute} from "vue-router"
import {useTagsViewStore} from "@/store/modules/tags-view"

const route = useRoute()
const tagsViewStore = useTagsViewStore()

const key = computed(() => {
  return route.path
})


</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component }">
      <keep-alive :include="tagsViewStore.cachedViews">
        <transition name="fade-transform" mode="out-in">
          <div>
            <component :is="Component" :key="key"/>
          </div>
        </transition>
      </keep-alive>
    </router-view>
  </section>
</template>

<style lang="scss">
.app-main {
  padding-bottom: var(--v3-join-us-bar-height);
  min-height: calc(100vh - var(--v3-navigationbar-height));
  position: relative;
  overflow: hidden;
  width: 100%;

  //background-image: url(@/assets/img/bgc_login.jpg);
  //background-position: -150px,-300px;


  // &:before {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   bottom: 0;
  //   right: 0;
  //   background-color: rgb(232 163 168 / 29%);
  //   background-position: 10 20;
  //   /* 设置浅浅的白色背景 */
  //   backdrop-filter: blur(10px);
  //   /* 设置模糊程度 */
  // }
}

.fixed-header + .app-main {
  padding-top: var(--v3-navigationbar-height);
  height: 100vh;
  overflow: auto;
}

.hasTagsView {
  .app-main {
    min-height: calc(100vh - var(--v3-header-height));
  }

  .fixed-header + .app-main {
    padding-top: var(--v3-header-height);
  }
}

// .is-fixed {
//   padding-top: calc(45px + var(--v3-navigationbar-height)) !important;
//   height: 100vh !important;
//   overflow: auto !important;
// }
</style>
